<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!-- 
    事件的基本使用：
        1、使用v-on:xxx 或者 @xxx 绑定事件，其中xxx是事件名
        2、事件的回调需要配置在methods对象中，最终会在vm上
        3、methods中配置的函数，不要用箭头函数，负责this就不是VM了
        4、methods中配置的函数，都是被Vue所管理的函数，this的指向是VM 或 组件实例对象
        5、@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参
 -->

<!-- 准备好一个容器 -->
<div id="root">
    <h1>欢迎来到，{{name}}</h1>
    <button v-on:click="showInfo">点我提示信息</button>
    <!-- Vue简写方式 -->
    <button @click="showInfo">点我提示信息2</button>
   
    <button @click="showInfo2">点我提示信息3</button>
    <!-- $为占位符， 1是传入的参数 -->
    <button @click="showInfo3($event,10)">点我提示信息3</button>

</div>
<script type="text/javascript">
    Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。

    // 创建Vue实例
    new Vue({
        el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data: { // data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
            name: '事件代理',
        },
        methods: {
            showInfo() {
                alert("方法调用成功!")
            },
            // event 是原生默认参数
            showInfo2(event) {
                alert(event.target.innerText)
            },
           
            showInfo3(event,number) {
                alert(event.target.innerText)
                alert(number)
                
            }
        }
    })
</script>
</body>
</html>